const { createApp } = Vue;

const WordType = {
  HIRAGANA: 0,
  KATAKANA: 1
};

const ALL_HIRAGANA =
"あいうえおかがきぎくぐけげこごさざしじすずせぜそぞただちぢつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわん";

const ALL_KATAKANA =
"アイウエオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロワワン";

const ALL_ENGLISH_LETTERS = "abcdefghijklmnopqrstuvwxyz"

createApp({
  data() {
    return {
      num: 0,
      kanji: "漢字",
      inputText: "",
      pronunciation: "かんじ",
      title: "",
      result: "",
      rate: "",
      correctCount: 0,
      errorCount: 0,
      words: [],
      charList: [],
      cur: 0,
      showModal: true, // 控制是否显示浮层
      courseUnits: [
        {
          unitName: "時間",
          unitId: "time",
          words: [
            { kanji: "春", pronunciation: "はる" },
            { kanji: "夏", pronunciation: "なつ" },
            { kanji: "秋", pronunciation: "あき" },
            { kanji: "冬", pronunciation: "ふゆ" },
            { kanji: "去年", pronunciation: "きょねん" },
            { kanji: "今年", pronunciation: "ことし" },
            { kanji: "来年", pronunciation: "らいねん" },
            { kanji: "一昨日", pronunciation: "おととい" },
            { kanji: "昨日", pronunciation: "きのう" },
            { kanji: "今日", pronunciation: "きょう" },
            { kanji: "明日", pronunciation: "あした" },
            { kanji: "明後日", pronunciation: "あさって" },
            { kanji: "朝", pronunciation: "あさ" },
            { kanji: "夜", pronunciation: "よる" },
            { kanji: "午前", pronunciation: "ごぜん" },
            { kanji: "正午", pronunciation: "しょうご" },
            { kanji: "午後", pronunciation: "ごご" },
            { kanji: "夕方", pronunciation: "ゆうがた" },
            { kanji: "嘗て", pronunciation: "かつて" },
            { kanji: "早い", pronunciation: "はやい" },
            { kanji: "長い", pronunciation: "ながい" },
            { kanji: "短い", pronunciation: "みじかい" },
            { kanji: "待つ", pronunciation: "まつ" },
            { kanji: "遅刻する", pronunciation: "ちこくする" },
            { kanji: "毎日", pronunciation: "まいにち" },
          ],
        },
        {
          unitName: "色",
          unitId: "color",
          words: [
            { kanji: "赤", pronunciation: "あか" },
            { kanji: "青", pronunciation: "あお" },
            { kanji: "黄色", pronunciation: "きいろ" },
            { kanji: "緑", pronunciation: "みどり" },
            { kanji: "紫", pronunciation: "むらさき" },
            { kanji: "橙色", pronunciation: "だいだいいろ" },
            { kanji: "灰色", pronunciation: "はいいろ" },
            { kanji: "白", pronunciation: "しろ" },
            { kanji: "黒", pronunciation: "くろ" },
            { kanji: "褐色", pronunciation: "かっしょく" },
          ],
        },
        {
          unitName: "方向",
          unitId: "direction",
          words: [
            { kanji: "東", pronunciation: "ひがし" },
            { kanji: "南", pronunciation: "みなみ" },
            { kanji: "西", pronunciation: "にし" },
            { kanji: "北", pronunciation: "きた" },
            { kanji: "上", pronunciation: "うえ" },
            { kanji: "下", pronunciation: "した" },
            { kanji: "左", pronunciation: "ひだり" },
            { kanji: "右", pronunciation: "みぎ" },
            { kanji: "前", pronunciation: "まえ" },
            { kanji: "後ろ", pronunciation: "うしろ" },
            { kanji: "指す", pronunciation: "さす" },
            { kanji: "戻る", pronunciation: "もどる" },
            { kanji: "向ける", pronunciation: "むける" },
            { kanji: "回転する", pronunciation: "かいてんする" },
          ],
        },
        {
          unitName: "食べ物",
          unitId: "food",
          words: [
            { kanji: "豚", pronunciation: "ぶた" },
            { kanji: "牛", pronunciation: "うし" },
            { kanji: "羊", pronunciation: "ひつじ" },
            { kanji: "鶏", pronunciation: "にわとり" },
            { kanji: "魚", pronunciation: "さかな" },
            { kanji: "草", pronunciation: "くさ" },
            { kanji: "じゃが芋", pronunciation: "じゃがいも" },
            { kanji: "tomato", pronunciation: "トマト" },
            { kanji: "茄子", pronunciation: "なす" },
            { kanji: "醬油", pronunciation: "しょうゆ" },
            { kanji: "酢", pronunciation: "す" },
            { kanji: "塩", pronunciation: "しお" },
            { kanji: "すき焼き", pronunciation: "すきやき" },
            { kanji: "寿司", pronunciation: "すし" },
            { kanji: "刺身", pronunciation: "さしみ" },
            { kanji: "味噌汁", pronunciation: "みそしる" },
            { kanji: "饂飩", pronunciation: "うどん" },
            { kanji: "天婦羅", pronunciation: "てんぷら" },
            { kanji: "焼き鳥", pronunciation: "やきとり" },
            { kanji: "McDonald's", pronunciation: "マクドナルド" },
            { kanji: "Starbucks", pronunciation: "スターバックス" },
            { kanji: "hamburger", pronunciation: "ハンバーガー" },
            { kanji: "pizza", pronunciation: "ピザ" },
            { kanji: "coffee", pronunciation: "コーヒー" },
            { kanji: "cola", pronunciation: "コーラ" },
            { kanji: "apple pie", pronunciation: "アップルパイ" },
            { kanji: "banana", pronunciation: "バナナ" },
            { kanji: "cheese", pronunciation: "チーズ" },
            { kanji: "bacon", pronunciation: "ベーコン" },
            { kanji: "fried potato", pronunciation: "フライドポテト" },
            { kanji: "butter", pronunciation: "バター" },
            { kanji: "salad", pronunciation: "サラダ" },
            { kanji: "tiramisu", pronunciation: "ティラミス" },
            { kanji: "cappuccino", pronunciation: "カプチーノ" },
            { kanji: "latte", pronunciation: "ラテ" },
          ],
        },
        {
          unitName: "学校",
          unitId: "school",
          words: [
            { kanji: "大学", pronunciation: "だいがく" },
            { kanji: "高校", pronunciation: "こうこう" },
            { kanji: "学校", pronunciation: "がっこう" },
            { kanji: "学生証", pronunciation: "がくせいしょう" },
            { kanji: "教育", pronunciation: "きょういく" },
            { kanji: "日本語", pronunciation: "にほんご" },
            { kanji: "英語", pronunciation: "えいご" },
            { kanji: "中国語", pronunciation: "ちゅうごくご" },
            { kanji: "数学", pronunciation: "すうがく" },
            { kanji: "物理", pronunciation: "ぶつり" },
            { kanji: "歴史", pronunciation: "れきし" },
            { kanji: "哲学", pronunciation: "てつがく" },
            { kanji: "体育祭", pronunciation: "たいいく" },
            { kanji: "吹奏楽部", pronunciation: "すいそうがくぶ" },
            { kanji: "軽音楽部", pronunciation: "けいおんがくぶ" },
            { kanji: "演奏する", pronunciation: "えんそうする" },
            { kanji: "活動する:", pronunciation: "かつどうする" },
            { kanji: "試験", pronunciation: "しけん" },
            { kanji: "宿題", pronunciation: "しゅくだい" },
            { kanji: "準備する", pronunciation: "じゅんびをする" },
            { kanji: "入る", pronunciation: "はいる" },
            { kanji: "勉強する", pronunciation: "べんきょうする" },
            { kanji: "同級生", pronunciation: "どうきゅうせい" },
            { kanji: "pen", pronunciation: "ペン" },
            { kanji: "黒板", pronunciation: "こくばん" },
            { kanji: "手帳", pronunciation: "てちょう" },
            { kanji: "本", pronunciation: "ほん" },
          ],
        },

        {
          unitName: "建物",
          unitId: "buildings",
          words: [
            { kanji: "公園", pronunciation: "こうえん" },
            { kanji: "図書館", pronunciation: "としょかん" },
            { kanji: "美術館", pronunciation: "びじゅつかん" },
            { kanji: "銀行", pronunciation: "ぎんこう" },
            { kanji: "郵便局", pronunciation: "ゆうびんきょく" },
            { kanji: "居酒屋", pronunciation: "いざかや" },
            { kanji: "遊園地", pronunciation: "ゆうえんち" },
            { kanji: "神社", pronunciation: "じんじゃ" },
            { kanji: "市役所", pronunciation: "しやくしょ" },
            { kanji: "消防署", pronunciation: "しょうぼうしょ" },
            { kanji: "駅", pronunciation: "えき" },
            { kanji: "病院", pronunciation: "びょういん" },
            { kanji: "映画館", pronunciation: "えいがかん" },
            { kanji: "教会", pronunciation: "きょうかい" },
            { kanji: "restaurant", pronunciation: "レストラン" },
            { kanji: "supermarket", pronunciation: "スーパーマーケット" },
            { kanji: "cafe", pronunciation: "カフェ" },
            { kanji: "停", pronunciation: "てい" },
            { kanji: "tower", pronunciation: "タワー" },
            { kanji: "橋", pronunciation: "はし" },
            { kanji: "本屋", pronunciation: "ほんや" },
          ],
        },
        {
          unitName: "交通",
          unitId: "transportation",
          words: [
            { kanji: "車", pronunciation: "くるま" },
            { kanji: "自転車", pronunciation: "じてんしゃ" },
            { kanji: "電車", pronunciation: "でんしゃ" },
            { kanji: "飛行機", pronunciation: "ひこうき" },
            { kanji: "船", pronunciation: "ふね" },
            { kanji: "地下鉄", pronunciation: "ちかてつ" },
            { kanji: "歩道", pronunciation: "ほどう" },
            { kanji: "道路", pronunciation: "どうろ" },
            { kanji: "駐車場", pronunciation: "ちゅうしゃじょ" },
            { kanji: "降りる", pronunciation: "おりる" },
            { kanji: "出発する", pronunciation: "しゅっぱつする" },
            { kanji: "到着する", pronunciation: "とうちゃくする" },
            { kanji: "歩く", pronunciation: "あるく" },
            { kanji: "乗る", pronunciation: "のる" },
            { kanji: "運転する", pronunciation: "うんてんする" },
            { kanji: "乗客", pronunciation: "じょうきゃく" },
            { kanji: "bus", pronunciation: "バス" },
            { kanji: "taxi", pronunciation: "タクシー" },
            { kanji: "速い", pronunciation: "はやい" },
            { kanji: "遅い", pronunciation: "おそい" },
          ],
        },

        {
          unitName: "職業",
          unitId: "jobs",
          words: [
            { kanji: "店長", pronunciation: "てんちょう" },
            { kanji: "弁護士", pronunciation: "べんごし" },
            { kanji: "医師", pronunciation: "いし" },
            { kanji: "先生", pronunciation: "せんせい" },
            { kanji: "学生", pronunciation: "がくせい" },
            { kanji: "公務員", pronunciation: "こうむいん" },
            { kanji: "農家", pronunciation: "のうか" },
            { kanji: "仕事", pronunciation: "しごと" },
            { kanji: "上司", pronunciation: "じょうし" },
            { kanji: "給料", pronunciation: "きゅうりょう" },
            { kanji: "会議", pronunciation: "かいぎ" },
            { kanji: "履歴書", pronunciation: "りれきしょ" },
            { kanji: "経験", pronunciation: "けいけん" },
            { kanji: "働く", pronunciation: "はたらく" },
            { kanji: "雇う", pronunciation: "雇う" },
            { kanji: "辞める", pronunciation: "やめる" },
            { kanji: "予定する", pronunciation: "よていする" },
            { kanji: "開催する", pronunciation: "かいさいする" },
            { kanji: "適用する", pronunciation: "てきようする" },
            { kanji: "指導する", pronunciation: "しどうする" },
            { kanji: "忙しい", pronunciation: "忙しい" },
            { kanji: "誠実な", pronunciation: "せいじつな" },
            { kanji: "有能な", pronunciation: "ゆうのうな" },
            { kanji: "責任感", pronunciation: "せきにんかん" },
            { kanji: "project", pronunciation: "プロジェクト" },
            { kanji: "schedule", pronunciation: "スケジュール " },
          ],
        },
        {
          unitName: "人名",
          unitId: "persons",
          words: [
            { kanji: "佐藤", pronunciation: "さとう" },
            { kanji: "鈴木", pronunciation: "すずき" },
            { kanji: "高橋", pronunciation: "たかはし" },
            { kanji: "田中", pronunciation: "たなか" },
            { kanji: "渡辺", pronunciation: "わたなべ" },
            { kanji: "加藤", pronunciation: "かとう" },
            { kanji: "山田", pronunciation: "やまだ" },
            { kanji: "松本", pronunciation: "まつもと" },
            { kanji: "佐々木", pronunciation: "ささき" },
            { kanji: "吉田", pronunciation: "よしだ" },
            { kanji: "井上", pronunciation: "いのうえ" },
            { kanji: "伊藤", pronunciation: "いとう" },
            { kanji: "夏目漱石", pronunciation: "なつめそうせき" },
            { kanji: "安倍晋三", pronunciation: "あべしんぞ" },
            { kanji: "小泉純一郎", pronunciation: "こいずみじゅんいちろ" },
            { kanji: "岸田文雄", pronunciation: "きしだふみお" },
            { kanji: "村上春樹", pronunciation: "むらかみはるき" },
            { kanji: "芥川竜之介", pronunciation: "あくたがわりゅのすけ" },
            { kanji: "太宰治", pronunciation: "だざいおさむ" },
            { kanji: "神里綾華", pronunciation: "かみさとあやか" },
            { kanji: "初音ミク", pronunciation: "はつねみく" },
          ],
        },
        {
          unitName: "地名",
          unitId: "locations",
          words: [
            { kanji: "浅草寺", pronunciation: "せんそうじ" },
            { kanji: "羽田空港", pronunciation: "はねだくうこう" },
            { kanji: "東京駅", pronunciation: "とうきょうえき" },
            { kanji: "千代田", pronunciation: "ちよだ" },
            { kanji: "新宿", pronunciation: "しんじゅく" },
            { kanji: "原宿", pronunciation: "はらじゅく" },
            { kanji: "下北沢", pronunciation: "しもきたざわ" },
            { kanji: "横浜", pronunciation: "よこはま" },
            { kanji: "富士山", pronunciation: "ふじさん" },
            { kanji: "東京", pronunciation: "とうきょう" },
            { kanji: "名古屋", pronunciation: "なごや" },
            { kanji: "京都", pronunciation: "きょうと" },
            { kanji: "大阪", pronunciation: "おおさか" },
            { kanji: "神戸", pronunciation: "こうべ" },
            { kanji: "札幌", pronunciation: "さっぽろ" },
            { kanji: "奈良", pronunciation: "なら" },
            { kanji: "大都会", pronunciation: "だいとかい" },
            { kanji: "中心", pronunciation: "ちゅうしん" },
            { kanji: "巨大な", pronunciation: "きょだいな" },
            { kanji: "伝統的な", pronunciation: "でんとうてきな" },
            { kanji: "文化", pronunciation: "ぶんか" },
            { kanji: "自然", pronunciation: "しぜん" },
          ],
        },
        {
          unitName: "身体",
          unitId: "body",
          words: [
            { kanji: "身体", pronunciation: "からだ" },
            { kanji: "頭", pronunciation: "あたま" },
            { kanji: "目", pronunciation: "め" },
            { kanji: "手", pronunciation: "て" },
            { kanji: "鼻", pronunciation: "はな" },
            { kanji: "足", pronunciation: "あし" },
            { kanji: "腕", pronunciation: "うで" },
            { kanji: "心臓", pronunciation: "しんぞ" },
            { kanji: "皮膚", pronunciation: "ひふ" },
            { kanji: "骨", pronunciation: "ほね" },
            { kanji: "筋肉", pronunciation: "きんにく" },
            { kanji: "薬", pronunciation: "くすり" },
            { kanji: "手術", pronunciation: "しゅじゅつ" },
            { kanji: "痛い", pronunciation: "痛い" },
            { kanji: "生命", pronunciation: "せいめい" },
            { kanji: "健康な", pronunciation: "けんこうな" },
            { kanji: "元気な", pronunciation: "げんきな" },
            { kanji: "良好な", pronunciation: "りょうこうな" },
            { kanji: "正常な", pronunciation: "せいじょうな" },
            { kanji: "虚弱な", pronunciation: "きょじゃくな" },
          ],
        },
        {
          unitName: "ACGN",
          unitId: "acgn",
          words: [
            { kanji: "漫画", pronunciation: "まんが" },
          ],
        },
        {
          unitName: "スポーツ",
          unitId: "sports",
          words: [
            { kanji: "野球", pronunciation: "やきゅう" },
          ],
        },
      ],
      selectedUnit: "",
    };
  },
  methods: {
    // 初始化题目
    initQuestions() {
      // 获取题目
      for (var unit of this.courseUnits) {
        if (unit['unitId'] == this.selectedUnit) {
          this.words = unit['words'];
        }
      }

      // 初始化题目的剩余出现次数
      for (var i in this.words) {
        this.words[i].usage = 1; // 默认出现次数为1
      }

      // 乱序
      var needToRandomSorted = true;
      if (needToRandomSorted) {
        this.shuffleArray(this.words);
      }
    },

    // 移动到下一题
    moveToNextWord() {
      let n = this.words.length;

      // 假定没有完成所有题目，则继续滚动
      let rawCur = this.cur;
      this.cur = (this.cur + 1) % n;
      while (this.words[this.cur].usage == 0) {
        this.cur = (this.cur + 1) % n;
        if (rawCur == this.cur) {
          // 如果回到起点，说明已经完成所有题目了
          alert("おめでとうございます！すべての単語クイズを完了しました。");
          return;
        }
      }
    },

    // 输入标准答案的字符串，返回10个按钮的字符，此处不提供乱序
    getCharList(string, wordType) {
      // 创建一个包含所有字母的数组
      let allLetters = (wordType == WordType.HIRAGANA) ? ALL_HIRAGANA : ALL_KATAKANA;

      console.log(string, "is a ", wordType, " word");

      // 将输入字符串中的字符添加到结果set
      const result = new Set();
      for (const char of string) {
        result.add(char);
      }
      // 从剩余的字母中随机选择字符来补全
      while (result.size < 10) {
        const randomIndex = Math.floor(Math.random() * allLetters.length);
        const randomChar = allLetters[randomIndex];

        // 确保随机字符不在结果数组中，避免重复
        if (!result.has(randomChar)) {
          result.add(randomChar);
        }
      }

      return Array.from(result);
    },

    // Shuffle洗牌算法，实现乱序。乱序题目整体和乱序选项都需要。
    shuffleArray(arr) {
      for (let i = arr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
      }
    },

      // 判断题目类型，是平假名还是片假名
    getWordType(word) {
      for(var char of ALL_ENGLISH_LETTERS) {
        if (word.kanji.includes(char)) {
          return WordType.KATAKANA;
        }
      }
      return WordType.HIRAGANA;
    },

    // 刷新题目
    refreshQuestion() {
      // 题目、答案赋值
      let word = this.words[this.cur];
      this.kanji = word.kanji;
      this.pronunciation = word.pronunciation;

      // 判断题目类型，是平假名还是片假名
      let wordType = this.getWordType(word);

      // 清空输入
      this.inputText = "";

      // 修改题目
      if (wordType == WordType.HIRAGANA) {
        this.title = "対応するひらがなを入力してください";
      } else {
        this.title = "対応するひカタカナ入力してください";
      }

      // 加载选项
      let charList = this.getCharList(this.pronunciation, wordType);
      this.shuffleArray(charList);
      this.charList = charList;
    },

    // 处理提交按钮事件
    handleClick() {
      if (this.inputText == this.pronunciation) {
        this.result = "";
        this.correctCount++;
        this.words[this.cur].usage--; // 剩余的出现次数-1

        // 正确才进入下一题
        this.moveToNextWord();
      } else {
        this.result = `間違っています!「${this.kanji}」は「${this.pronunciation}」と読むべきです。`;
        this.words[this.cur].usage++; // 剩余的出现次数+1
        this.errorCount++;
      }

      // 刷新题目内容 让输入框获取焦点
      this.refreshQuestion();
      this.$refs.inputTextRef.focus();

      // 刷新比率数据
      let rateDic = this.correctCount / (this.correctCount + this.errorCount);
      let rateStr = (rateDic * 100).toFixed(1) + "%";
      this.rate = `正解数は${this.correctCount}問、誤答数は${this.errorCount}問、正答率は${rateStr}です。`;
    },

    // 通过按钮输入平假名
    handleCharButton(char) {
      this.inputText = this.inputText + char;
    },

    // 关闭浮层
    closeModal() {
      // 初始化问题
      this.initQuestions();
      this.refreshQuestion();

      console.log("User has choiced the option:", this.selectedUnit);

      // 浮层的显示=false
      this.showModal = false;

      // 在created钩子中让输入文本框设置焦点
      this.$nextTick(() => {
        this.$refs.inputTextRef.focus();
      });
    },
  },

  // 页面初始化时加载题目
  created() {},
}).mount("#app");
